<template>
	<view class="code-btn bg-main" hover-class="bg-main-hover" @click="sendCode">
		{{ time > 0 ? (time + 's') : '发送' }}
	</view>
</template>

<script>
	let timer = null
	export default {
		name:"code-btn",
		props: {
			phone: {
				type: [Number,String],
				default: ''
			},
		},
		data() {
			return {
				time:0
			};
		},
		methods: {
			sendCode() {
				if(this.time > 0){
					return
				}
				
				this.$api.getCaptchat({
					phone:this.phone
				}).then(res=>{
					console.log(res);
					if(typeof res == 'number'){
						this.$toast('验证码：'+res)
					} else {
						this.$toast('发送成功')
					}
					this.time = 60
					timer = setInterval(()=>{
						this.time--
						if(this.time <= 0){
							clearInterval(timer)
						}
					},5000)
				})
				
				
			}
		},
	}
</script>

<style>
.code-btn{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 200rpx;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	border-top-right-radius: 8rpx;
	border-bottom-right-radius: 8rpx;
	z-index: 999;
}
</style>
